import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { AreaModalv1Wrapper } from "./style";
import { CloseCircleOutlined } from "@ant-design/icons";

interface IProps {
  children?: ReactNode;
  modalText: string,
  modelDes: string
  isDesModal: number,
  onCancel: (payload: number) => void
}

const AreaModalV1: FC<IProps> = (props: IProps) => {
  const { modalText, modelDes, isDesModal, onCancel } = props

  const handleCancel = () => {
    onCancel(0)
  }

  return <AreaModalv1Wrapper style={{ display: isDesModal ? "block" : "none" }}>
    <div className="heder">
      <div className="left-title">{modalText}介绍</div>
      <div className="cancel" onClick={handleCancel}><CloseCircleOutlined height={"2em"} width={"2em"} /></div>
    </div>
    <div className="coniner">
      {modelDes}
    </div>
  </AreaModalv1Wrapper>;
};

export default memo(AreaModalV1);